<!DOCTYPE html>
<html>
<head>
    <meta name="screen-orientation" content="portrait">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
    <title>金兔送福 新年献礼</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/wall.css">

    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;

	    }
		
		.box-cell,
		.imgs {
			position: absolute;
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			z-index: 99;
		}
		
		.wall {width: 100%; height: 100%;
		    background-image: url(img/bg2.png);
		    overflow: hidden;
		    background-color: transparent;
		    background-size: 100% 100% ;
		    background-position: center center;
		    background-repeat: no-repeat;
			
			}

        .result {
            position: absolute;
            height: 320px;
            width: 100%;
            left: 0; top: 50%;
            margin-top: -160px;
            text-align: center;
            padding: 10px;
            display: none;
        }
        .result span {
            display: inline-block;
            font-size: 25px;
            width: 150px;
            background: #fff;
            line-height: 30px;
            color: #000;
            margin: 5px;
            border-radius: 10px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.8);
            padding: 10px 0;
        }
        button, input, optgroup, select, textarea {
            color: inherit;
            font: inherit;
            margin: 0;
            border: none;
        }
        button {
            overflow: visible;
        }
        button, select {
            text-transform: none;
        }
        button, html input[type=button], input[type=reset], input[type=submit] {
            -webkit-appearance: button;
            cursor: pointer;
        }
        .pure-button {
            display: inline-block;
            zoom: 1;
            line-height: normal;
            white-space: nowrap;
            vertical-align: middle;
            text-align: center;
            cursor: pointer;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .pure-button {
         /*   font-family: inherit;
            font-size: 100%;
            padding: .5em 1em;
            color: #444;
            color: rgba(0,0,0,.8);
            border: 0 rgba(0,0,0,0);
            background-color: #E6E6E6;
            text-decoration: none;
            border-radius: 2px; */
        }
   /*     .pure-button:focus {
            outline: 0
        } */
/*        .pure-button-hover, .pure-button:hover, .pure-button:focus {
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#1a000000', GradientType=0);
            background-image: -webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(40%,rgba(0,0,0,.05)),to(rgba(0,0,0,.1)));
            background-image: -webkit-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
            background-image: -moz-linear-gradient(top,rgba(0,0,0,.05) 0,rgba(0,0,0,.1));
            background-image: -o-linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
            background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));
        } */

        .button-success, .button-error, .button-warning, .button-secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
        }
       /* .button-success {
            background: rgb(28, 184, 65);
        } */
		.button-success {
            background-image: url(img/stop.png);
			background-size: 100% 100%;
        }
		.button-success:hover {
            background-image: url(img/stopHover.png);
			background-size: 100% 100%;
        }
        .button-error {
            background: rgb(202, 60, 60);
        }
        .button-warning {
            background: rgb(223, 117, 20);
        }
        /* .button-secondary {
            background: rgb(66, 184, 221);
        } */
		.button-secondary {
            background-image: url(img/start.png);
			background-size: 100% 100%;
        }
		.button-secondary:hover {
            background-image: url(img/startHover.png);
			background-size: 100% 100%;
        }
		
		
		.button-end {
            background-image: url(img/end.png);
			background-size: 100% 100%;
        }
		.button-end:hover {
            background-image: url(img/endHover.png);
			background-size: 100% 100%;
        }
		
		
        .tools {
            position: absolute;
            top: 92%;
            left: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
			z-index: 999;
        }
        .tools .pure-button {
            display: inline-block;
            margin: 5px;
            padding: 10px 0;
            text-align: center;
            width:450px;
            height:70px;
        }
        .mask {
            -webkit-filter:blur(5px);
            filter:blur(5px);
        }
        #main {
            -webkit-transition: all 1s;
            transition: all 1s;
        }



		.title-div{
					font-size: 26px;
					color: #FFFFFF;
				    top: 25.5%;
				    left: 50%;
				    transform: translate(-50%,-50%);
				   position: absolute;
		}
		.total-div{
					font-size: 24px;
					color: #BB1A0C;
				    top: 86%;
				    left: 50%;
				    transform: translate(-50%,-50%);
				   position: absolute;
		}
		.cmListDiv1{
				position: absolute; 
				
				background-color: rgba(0, 0, 0, 0.61);
				background-size: 100% 100%;
				width: 100%;
				height: 100%;
		}

		.cmDiv1{
				
				margin-left: 28%;
				margin-top: 10%;
					
				   display: inline-block;
				   width: 840px;height: 700px;
				   background-image: url(img/luckybg.png) ;
				   background-repeat: no-repeat;
				   background-size: 100% 100%;
				   
				   color: #AC6925;
				   padding-top: 120px;
				   padding-left: 210px;
				   padding-right: 20px;

				   font-size: 38px;
				   font-weight: bolder;
		}
		.cmDiv2{

				margin-left: 36%;
				margin-top: 20%;
				

				   display: inline-block;
				   width: 540px;height: 430px;
				   background-image: url(img/error.png) ;
				   background-repeat: no-repeat;
				   background-size: 100% 100%;
				  
				   color: #AC6925;
				   padding-top: 64px;
				   padding-left: 140px;
				   padding-right: 20px;

				   font-size: 28px;
		}
		.cmListDiv{
				   position: absolute;
				   width: 90%;
				   height: 60%;
				   top: 30%;
				   left: 5%;


		}

		.cmDiv{
				   display: inline-block;
				   width: 110px;height: 154px;background-image: url(img/cmbg.png) ;
				   background-repeat: no-repeat;
				   background-size: 100% 100%;
				   margin-left: 10px;
				   color: #FFFFFF;
				   padding-top: 5px;
				   padding-left: 20px;
				   padding-right: 20px;
				   text-align: center;
		}


		.container
		   {
			   position: absolute;
		      margin-top: 20%;
			  margin-left: 47%;
		      width: 300px;
		      height:300px;
		      display: none;
		      justify-content:center;
		      align-items:center;
			  z-index: 999999;
		      border-radius: 10%;
		   }
		   .loader
		   {
			   z-index: 999999;
		      width:100px;
		      height:100px;
		      border-radius:50%;
		      border:16px solid #d8d8d8;
		      border-top:16px solid #ff0000;
		      border-bottom:16px solid #ff0000;
		      animation:load 2s linear infinite;
		   }
		   @keyframes load
		   {
		      0%   { transform: rotate(0deg); }
		      100% { transform:rotate(360deg); }
		   }


		.result-btn {
				  width: 256px;
				  height: 88px;
				  top: 90%;
				  right: 5%;
				  transform: translate(-50%,-50%);
				 position: absolute;
			display: none;

		}
		
		
		.leftDiv{
			display: none;
				   color: #FFFFFF;
				  /* background-image: url(img/infoLeft.png);
				   background-repeat: no-repeat;
				   background-size: 100% 100%; */
					width: 480px;
				    height: 256px;
				    top: 32%;
				    left: 2%;
					padding-left: 80px;
				    position: absolute;
					font-family: "微软雅黑";
					font-weight: bolder;
					letter-spacing:5px;
					font-size: 36px;
				}
				.leftSpan1{
					display: block;
					margin-top: 48px;
					
				}
		
				.leftSpan3{
					display: block;
					margin-top: 50px;
					font-size: 50px;
					float: right;
					margin-right: 80px;
					color: #FBE169;
				}
		
				.leftSpan2{
					display: block;
					margin-top: 120px;
					
				}
		
				.leftSpan4{
					display: block;
					margin-top: 50px;
					font-size: 50px;
					float: right;
					margin-right: 80px;
					color: #FBE169;
				}
		
		.rightDiv{
			display: none;
				   color: #FFFFFF;
				   /* background-image: url(img/infoRight.png);
				   background-repeat: no-repeat;
				   background-size: 100% 100%; */
				   width: 350px;
				   height: 256px;
				   top: 35%;
				   right: 4%; 
				   position: absolute;
				   font-size: 36px;
				   font-family: "微软雅黑";
				   font-weight: bolder;
				   letter-spacing:5px;
		}
		.rightSpan1{
					display: block;
					margin-top: 16px;
					color: #FBE169;
					font-size: 40px;
		}
			   
		.rightSpan2{
					display: block;
					margin-top: 80px;
					
		 }
		
		.rightSpan3{
					display: block;
					margin-top: 60px;
					
					line-height: 30px;
		 }
		
		
			   
		.rightSpan4{
					margin-top: 30px;
					font-size: 50px;
					color: #FBE169;
		 }
		
		.rightSpan5{
					display: block;
					margin-top: 40px;
					
					line-height: 30px;
		 }
		
		.rightSpan6{
					display: block;
					margin-top: 40px;
					
					line-height: 30px;
		 }
		
    </style>
</head>
<body>
<!-- <div class="box-cell">
			<img class="imgs" src="img/cartoon/1%20(1).png" />
		</div> -->
		
<div id="main" class="wall">
  <!--  <div class="result-btn">
       <a href="./result.html" target="_blank">获奖名单</a>
    </div> -->

<div class="leftDiv">
		<span id="leftspan1" class="leftSpan1">本期抽奖票数</span>
		<span id="leftspan3" class="leftSpan3"></span>
		<span id="leftspan2" class="leftSpan2">本期抽奖人数</span>
		<span id="leftspan4" class="leftSpan4"></span>
	</div>
	<div class="rightDiv">
		<span id="rightspan1" class="rightSpan1"></span>
		<!-- <span id="rightspan2" class="rightSpan2">本期抽取<span id="rightspan4" class="rightSpan4"></span>汽车</span>
		 -->
		<span id="rightspan3" class="rightSpan3">本期活动参与周期</span>
		<span id="rightspan5" class="rightSpan5"></span>
		<span id="rightspan6" class="rightSpan6"></span>
	</div>
	


	

	<div id="lucky" style="display: none;" class="cmListDiv1">
	 	<div class="cmDiv1">
			<span id='luckyTitle' style="line-height: 60px;display: block;color: #B80909;font-size: 32px;margin-left: 98px;font-weight: bold;"></span>
			<span id='luckyName' style="font-size: 128px;line-height: 60px;display: block;margin-top: 180px;margin-left: 80px;"></span>
			<p id='luckyID' style="overflow-wrap: break-word;line-height: 25px;margin-top: 50px;"></p>
			<span id='luckyPhone' style="line-height: 60px;display: block;margin-top: 48px;"></span>
			<span id='luckyMsg' style="line-height: 60px;display: block;margin-top: 55px;color: #B80909;margin-left: 30px;font-weight: bold;font-size: 38px;letter-spacing:5px;"></span>
		</div>
	</div>

	<div id="err" style="display: none;" class="cmListDiv1">
	 	<div class="cmDiv2">
			<span  style="line-height: 60px;display: block;color: #B80909;font-size: 22px;margin-left: 90px;font-weight: bold;">错误提示</span>
			<span id='errName' style="line-height: 60px;display: block;margin-top: 20px;"></span>
		</div>
	</div>

	<div  id='cmList' class="cmListDiv">

	</div>

	<div id='total' class="total-div"></div>
	<div id='loading'  class="container">
	  <div class='loader'></div>
	</div>
</div>
<div id="result" class="result">
</div>

	<img class="result-btn" src="img/result.png" onclick="toPage()"/>




<div id="tools" class="tools">
   <!--  <button
        v-for="value in btns"
        @click="onClick(value)"
        class="pure-button"
        :class="{ 'button-error': selected == value}"
       >{{value}}</button> -->
<!--    <button
       class="pure-button"
       @click="toggle"
       :class="{'button-secondary': !running,
               'button-success': running}">{{running?'停':'开始'}}</button> -->
<!--    <div
       class="pure-button"
       @click="toggle"
       :class="{'button-secondary': !running,
               'button-success': running}">{{running?'停':'开始'}}</div> -->
    <div
		id='btnStart'
		
       class="pure-button"
       @click="toggle"
		@keyup.enter="toggle"
		@keyup.space="toggle"
       :class="{'button-secondary': !running,
               'button-success': running}"></div>
    <div
		id='btnEnd'
		style="display: none;"
        class="pure-button button-end"
        @click="toggle"
		@keyup.enter="toggle"
		@keyup.space="toggle"
       ></div>
 <!--   <button class="pure-button button-warning" @click="reset">重置</button> -->



</div>
	<div>
		 <audio src="img/music.mp3" type="audio/mp3" controls="controls" id="bgMusic" hidden="false">
	</div>

<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/zepto.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/tagcanvas.js"></script>
<!-- <script type="text/javascript" src="js/member.js"></script> -->
<script type="text/javascript">

		
			
			//播放图片动画
			function playImages(sources) {
				let index = 0;
				setInterval(function() {
					$('.imgs').attr('src', sources[index]);
					index++;
					if(index == sources.length) {
						index = 0;
					}
				}, 35)
			}


    (function(){
		
		
/* 		//动效设置开始
		var sources = [];
		//构建图片序列数据
		for(var i = 0; i <= 99; i++) {
			sources[i] = 'img/cartoon/1 (' + i + ').png'; //根据项目修改
		}
		
		playImages(sources);
		//动效设置结束

 */






		var isLast = false

		$.ajax({
			type: 'GET',
			url: server_url+'/lottery/lucky/config',
			dataType: 'json',
			success: function(data){
				if(data.data.secondTitle){
					$("#title").html(data.data.secondTitle)
					
					$("#rightspan1").html(data.data.secondTitle)
					$("#rightspan4").html(data.data.maxLucky+"辆")
					//$("#rightspan4").html("1辆")
					$("#rightspan5").html("起："+data.data.startDay)
					$("#rightspan6").html("止："+data.data.finishDay)
					
				}else{
					$('#err').css('display', 'block');
					$('#errName').html(data.data.errorMsg)
				}

			},
			error: function(xhr, type){
				console.log('-------------err')
			}
		})


/* 		$.ajax({
			type: 'GET',
			url: server_url+'/lottery/lucky/users/42',
			dataType: 'json',
			success: function(data){
				console.log(data.data)
				var list = data.data.list;
				if(list.length>0){
					for(var i=0;i<list.length;i++){



						var idCard_temp = list[i].idCard.substring(4, 15) // 03199901015 提取身份证的第5位(下标为4)到第14位（结束位为15）
						list[i].idCard = list[i].idCard.replace(idCard_temp, '***********')

						var phone_temp = list[i].mobile.substring(3, 7) // 03199901015 提取身份证的第5位(下标为4)到第14位（结束位为15）
						list[i].mobile = list[i].mobile.replace(phone_temp, '****')


						if(list[i].name.length==2){
							list[i].name = list[i].name.substring(0,1)+'*' //截取name 字符串截取第一个字符，
						}else if(list[i].name.length==3){
							list[i].name = list[i].name.substring(0,1)+"*"+list[i].name.substring(2,3)//截取第一个和第三个字符
						}else if(list[i].name.length>3){
							list[i].name = list[i].name.substring(0,1)+"*"+'*'+list[i].name.substring(3,list[i].name.length)//截取第一个和大于第4个字符
						}




						$("#cmList").append("<div class='cmDiv'><span style='line-height: 40px;display:block'>"+list[i].name+"</span><span style='overflow-wrap: break-word;line-height: 20px;display:block'>"+list[i].idCard+"</span><span style='line-height: 20px;display:block'>"+list[i].mobile+"</span></div>")

					}
					//$("#cmList").html(html)
					$("#total").html("共计"+data.data.total+"名彩民")
				}else{
					//alert('当前没有可抽奖的用户')
					$('#err').css('display', 'block');
					$('#errName').html('当前没有可抽奖的用户')
				}

			},
			error: function(xhr, type){
				console.log('-------------err')
			}
		}) */



		var member = [];
		$.ajax({
			async:false,
			type: 'GET',
			url: server_url+'/lottery/lucky/users/300',
			dataType: 'json',
			success: function(data){
				
				$("#leftspan3").html(data.data.total+"张")
				$("#leftspan4").html(data.data.count+"人")
				
				member = data.data.list;

				if(member){
					member.forEach(item=>{
						/* if(item.name.length==2){
						 	item.name = item.name.substring(0,1)+'*' //截取name 字符串截取第一个字符，
						 }else if(item.name.length==3){
						 	item.name = item.name.substring(0,1)+"*"+item.name.substring(2,3)//截取第一个和第三个字符
						 }else if(item.name.length>3){
						 	item.name = item.name.substring(0,1)+"*"+'*'+item.name.substring(3,item.name.length)//截取第一个和大于第4个字符
						 } */
					})



				}


			},
			error: function(xhr, type){
				console.log('-------------err')
			}
		})


        var choosed = JSON.parse(localStorage.getItem('choosed')) || {};
        console.log(choosed);
        var speed = function(){
            //return [0.1 * Math.random() + 0.01, -(0.1 * Math.random() + 0.01)];
            return [0.1,0.1];

        };
        var getKey = function(item){
            return item.name + '-' + item.mobile;
        };
        var createHTML = function(){
            var html = [ '<ul>' ];

            member.forEach(function(item, index){
                item.index = index;
                var key = getKey(item);
                var color = choosed[key] ? 'white' : 'white';
                html.push('<li><a href="#" style="color: ' + color + ';">' + item.name + '</a></li>');
               // html.push('<li><a href="#"  style="with:60px;height:30px;backgroud-color:red;color: ' + color + '">' + item.name + '</a></li>');
            });
            html.push('</ul>');
            return html.join('');
        };



       /* var lottery = function(count){
            var list = canvas.getElementsByTagName('a');
            var color = 'yellow';
            var ret = member
                .filter(function(m, index){
                    m.index = index;
                    return !choosed[getKey(m)];
                })
                .map(function(m){
                    return Object.assign({
                      score: Math.random()
                    }, m);
                })
                .sort(function(a, b){
                    return a.score - b.score;
                })
                .slice(0, count)
                .map(function(m){
                  choosed[getKey(m)] = 1;
                  list[m.index].style.color = color;
                  return m.name + '<br/>' + m.mobile;
                });
            localStorage.setItem('choosed', JSON.stringify(choosed));
            return ret;
        }; */
        var lottery = function(count){

			musicRePlay();

			//$("#loading").show()
			$('#lucky').css('display', 'none');
			$('#err').css('display', 'none');

			var ret;
           $.ajax({
           	async:true,
           	type: 'GET',
           	url: server_url+'/lottery/lucky/draw',
           	dataType: 'json',
			beforeSend: function () {

			},
           	success: function(data){
				//关闭spinner
				//$("#loading").css('display', 'none');
				//$("#loading").hide()
           		console.log(data.data);
           		ret = data.data


				if(ret.seq){

/* 
					var idCard_temp = ret.idCard.substring(4, 15) // 03199901015 提取身份证的第5位(下标为4)到第14位（结束位为15）
					ret.idCard = ret.idCard.replace(idCard_temp, '***********')

					var phone_temp = ret.mobile.substring(3, 7) // 03199901015 提取身份证的第5位(下标为4)到第14位（结束位为15）
					ret.mobile = ret.mobile.replace(phone_temp, '****')


					if(ret.name.length==2){
						ret.name = ret.name.substring(0,1)+'*' //截取name 字符串截取第一个字符，
					}else if(ret.name.length==3){
						ret.name = ret.name.substring(0,1)+"*"+ret.name.substring(2,3)//截取第一个和第三个字符
					}else if(ret.name.length>3){
						ret.name = ret.name.substring(0,1)+"*"+'*'+ret.name.substring(3,ret.name.length)//截取第一个和大于第4个字符
					}
 */

					//$('#luckyTitle').html('本期第'+ret.seq+'位汽车大奖产生了')
					$('#luckyTitle').html('本次大奖产生了')
					$('#luckyName').html(ret.name)
					//$('#luckyID').html(ret.idCard)
					//$('#luckyPhone').html(ret.mobile)
					//$('#luckyMsg').html('恭喜您喜中汽车一辆')
					$('#lucky').css('display', 'block');

					if(ret.last){

						isLast = ret.last
						$('#btnEnd').css('display', 'block');
						$('#btnStart').css('display', 'none');
					}


				}else{
					$('#err').css('display', 'block');
					$('#errName').html(ret.errorMsg)
				}



           	},
           	error: function(xhr, type){
           		console.log('-------------err')
           	}
           })
            return ret;
        };
        var canvas = document.createElement('canvas');
        canvas.id = 'myCanvas';
        canvas.width = document.body.offsetWidth/1.5;
        canvas.height = document.body.offsetHeight/1.5;
		canvas.style = ' margin-top: 14%;margin-left: 17%;';
		console.log(canvas.width)
		console.log(canvas.height)
        document.getElementById('main').appendChild(canvas);
        new Vue({
            el: '#tools',
            data: {
                selected: 1,
                running: false,
				isLast:isLast,
                btns: [
                    1
                ]
            },
			created() {
				document.onkeydown = (e) => {
					let _key = window.event.keyCode;

					if (_key === 13 || _key=== 32) {
						if(isLast){
							window.location.href = 'result.html'
						}else{
							this.toggle();
						}


					}
				};

			},
            mounted () {
                canvas.innerHTML = createHTML();


			   TagCanvas.Start('myCanvas', '', {
					   textColour: '#fff',
					   initial: [0.1, 0.1],
					   dragControl: 1,
					   textHeight: 16,
			   
				   });
            },
            methods: {
                reset: function(){

                    location.reload(true);

                },

                onClick: function(num){
                    $('#result').css('display', 'none');
                    $('#main').removeClass('mask');
                    this.selected = num;
                },
                toggle: function(){

					console.log(this.running)
					$("#cmList").css('display','none');


					TagCanvas.Start('myCanvas', '', {
					        textColour: '#fff',
					        initial: [0.1, 0.1],
					        dragControl: 1,
					        textHeight: 16,

					    });


                    if(this.running){



						this.running = !this.running;
                        TagCanvas.SetSpeed('myCanvas', [0.5, 0.5]);


                        var ret = lottery(this.selected);
                       /* if (ret.length === 0) {
                            $('#result').css('display', 'block').html('<span>已抽完</span>');
                            return
                        } */
                        TagCanvas.SetSpeed('myCanvas', [0.1, 0.1]);
						//$('#result').css('display', 'block').html('<span>' + ret.join('</span><span>') + '</span>');
						
						
						
                    } else {

						if(isLast){
							toPage()
						}

						this.running = !this.running;
                        $('#result').css('display', 'none');
                        $('#main').removeClass('mask');
                        TagCanvas.SetSpeed('myCanvas', [0.5, 0.5]);
						$('#lucky').css('display', 'none');
						$('#err').css('display', 'none');
					//	$('#loading').hide()

						//开始播放
						musicPlay();
                    }

                }
            }
        });








    })();
	  //播放/暂停
	    function musicPlay(){
	    	//音乐播放
	    	var audio = document.getElementById("bgMusic");

	        //播放(继续播放)
	        audio.currentTime=0;
			audio.play();
	    }

	    //重新播放
	    function musicRePlay(){
	    	//音乐播放
	    	var audio = document.getElementById("bgMusic");
	    	if(audio!=null){
	    		if(audio.paused){
	    			audio.play();//播放
	    		}else{
	    			audio.pause();//暂停
	    		}
	    	}

	    }

	function toPage(){
		window.location.href= 'result.html'
	};
</script>
</body>
</html>
